$f: 19.2;
img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}


@keyframes fadeInUp_ {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0)
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}

.fadeInUp_ {
  -webkit-animation-name: fadeInUp_;
  animation-duration: 2s;
  animation-name: fadeInUp_
}

.common_bg{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}


:root {
  --color: #3279FF;
}

.cursor {
  width: 167/$f+vw;
  height: 167/$f+vw;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  &.on{
    .scale{
      transform: scale(1);
    }
  }
  &.l{
    .scale{
      img{
        transform: rotate(-180deg);
      }
    }
  }
  .scale{
    width: 100%;
    height: 100%;
    transition: .6s ease;
    transform: scale(0);
    img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: .1s ease;
    }
  }
}
body:hover .cursor{
  opacity: 1;
}

.home {


  .how_content{
    width: 1440/$f+vw;
    height: 440/$f+vw;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60/$f+vw;
    position: relative;
    z-index: 1;
    border-radius: 20/$f+vw;
    background: #D4E3FF;
    .joke{
      width: 100%;
      display: flex;
      justify-content: space-between;
      .l{
        margin: 10/$f+vw 0 0 0;
        h1{
          color: #000;
          font-size: 48/$f+vw;
          font-style: normal;
          font-weight: 600;
          letter-spacing: 0.96px;
          text-transform: capitalize;
        }
      }
      .r{
        width: 899/$f+vw;
        .text{
          color: #000;
          font-size: 20/$f+vw;
          font-style: normal;
          font-weight: 400;
          line-height: 36/$f+vw; /* 180% */
          letter-spacing: 1px;
          margin: 0 0 40/$f+vw;
        }
        a {
          display: flex;
          width: fit-content;
          padding: 8/$f+vw 30/$f+vw;
          justify-content: center;
          align-items: center;
          gap: 20/$f+vw;
          border-radius: 91/$f+vw;
          border: 1px solid #000;
          background: #000;
          transition: all 600ms;
          color: #FFF;
          font-size: 20/$f+vw;

          p {
            line-height: 2;
            letter-spacing: 1px;
            text-transform: uppercase;
          }

          svg {
            width: 16/$f+vw;
            display: block;
          }

          &:hover {
            background: #5E9EFF;
            border-color: #5E9EFF;
          }
        }
      }
    }
  }

  .banner{
    height: 871/$f+vw;
    position: relative;
    .button{
      position: absolute;
      width: 100%;
      bottom: 338/$f+vw;
      //transform: translateY(-50%);
      pointer-events: none;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      padding: 0 81/$f+vw 0 75/$f+vw;
      .circle{
        width: 84/$f+vw;
        position: relative;
        cursor: pointer;
        pointer-events: auto;
        &:hover{
          img{
            &:first-child{
              opacity: 0;
            }
            &:nth-child(2) {
              opacity: 1;
            }
          }
        }
        &:first-child{
          transform: rotate(180deg);
        }
        img{
          width: 100%;
          transition: .6s;
          &:nth-child(2) {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
          }
        }
      }
    }
    .swiper-container{
      width: 100%;
      height: 100%;
      .swiper-slide{
        &.swiper-slide-active{
          .text{
            transition: 1s;
            transition-delay: .5s;
            opacity: 1;
            transform: translateY(0);
          }
        }
        .img{
          width: 100%;
          height: 100%;
        }
        .text{
          position: absolute;
          left: 300/$f+vw;
          bottom: 150/$f+vw;
          z-index: 1;
          transform: translateY(20px);
          opacity: 0;
          p{
            color: #FFF;
            font-size: 40/$f+vw;
            font-style: normal;
            font-weight: 600;
            letter-spacing: 0.8px;
            text-transform: capitalize;
          }
          h1{
            color: #FFF;
            font-size: 75/$f+vw;
            font-style: normal;
            font-weight: 600;
            letter-spacing: 1.5px;
            text-transform: capitalize;
          }
        }
      }
    }
  }

  .section1{
    position: relative;
    padding: 100/$f+vw 0 60/$f+vw;
    overflow: hidden;
    .position_text{
      font-size: 80/$f+vw;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      text-transform: uppercase;
      position: absolute;
      top: 144/$f+vw;
      left: -52/$f+vw;
      z-index: -1;
      background: linear-gradient(270deg, rgba(216, 216, 216, 0.2) 0%, #D8D8D8 46.5%, rgba(216, 216, 216, 0.2) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transform: rotate(-90deg);
      transform-origin: bottom;
    }

    .title{
      text-align: center;
      .p1{
        color: #000;
        font-size: 20/$f+vw;
        font-style: normal;
        font-weight: 400;
        line-height: 50/$f+vw; /* 250% */
        letter-spacing: 1px;
        text-transform: uppercase;
      }
      h1{
        color: #000;
        text-align: center;
        font-size: 48/$f+vw;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: 0.96px;
        text-transform: capitalize;
        margin: 10/$f+vw 0 40/$f+vw;
      }
      a{
        display: flex;
        width: fit-content;
        padding: 8/$f+vw 30/$f+vw;
        justify-content: center;
        align-items: center;
        gap: 20/$f+vw;
        border-radius: 91/$f+vw;
        border: 1px solid #000;
        background: #000;
        transition: all 600ms;
        color: #FFF;
        font-size: 20/$f+vw;
        margin: auto;

        p {
          line-height: 2;
          letter-spacing: 1px;
          text-transform: uppercase;
        }

        svg {
          width: 16/$f+vw;
          display: block;
        }

        &:hover {
          background: #5E9EFF;
          border-color: #5E9EFF;
        }
      }
    }
    .content{
      width: 100%;
      margin: 80/$f+vw 0 0 0;
      .index2Swiper{
        width: 110vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        padding: 20/$f+vw 0;
        .swiper-slide-next{
          .item{
            .joke{
              transform: translateX(60px);
            }
          }
        }
        .swiper-slide-prev{
          .item{
            .joke{
              transform: translateX(-60px);
            }
          }
        }
        .swiper-slide{
          cursor: pointer;
          &.swiper-slide-active{
            .item{
              .joke{
                border-radius: 0px 20/$f+vw;
              }
              &:after{
                opacity: 1;
              }
              .img{
                width: 459/$f+vw;
                height: 444/$f+vw;
                margin: 62/$f+vw auto 0;
                pointer-events: auto;
              }
            }
          }
          .item{
            width: 100%;
            height: 628/$f+vw;
            position: relative;
            z-index: 1;
            transition: .6s ease;
            display: block;
            .l{
              position: absolute;
              left: 0;
              top: 0;
              width: 50/$f+vw;
              height: 100%;
              display: none;
            }
            .r{
              position: absolute;
              right: 0;
              top: 0;
              width: 50/$f+vw;
              height: 100%;
              display: none;
            }
            &:hover{
              .joke{
                .img{
                  img{
                    transform: scale(1.05);
                  }
                }
              }
            }
            &:after{
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              border-radius: 0px 20/$f+vw;
              background: linear-gradient(120deg, #85AFFF 12.34%, #BDD4FF 95.15%);
              z-index: -1;
              opacity: 0;
              transition: .6s ease;
            }
            .joke{
              width: 100%;
              height: 100%;
              box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.08);
              overflow: hidden;
              border-radius: 20/$f+vw;
              transition: .6s ease;
            }
            .img{
              width: 100%;
              height: 100%;
              border-radius: 10/$f+vw;
              overflow: hidden;
              margin: 0 auto 0;
              transition: .6s ease;
              display: block;
              pointer-events: none;
              img{
                width: 100%;
                height: 100%;
                transition: .6s ease;
              }
            }
            h1{
              color: #000;
              font-size: 34/$f+vw;
              font-style: normal;
              font-weight: 500;
              line-height: 40/$f+vw; /* 117.647% */
              letter-spacing: 1.7px;
              text-transform: uppercase;
              margin: 30/$f+vw 0 0 0;
              text-align: center;
            }
          }
        }
      }
    }
  }

  .section2{
    padding: 100/$f+vw 240/$f+vw;
    .title{
      text-align: center;
      p{
        color: #000;
        font-size: 20/$f+vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 1px;
        text-transform: uppercase;
      }
      h1{
        margin: 10/$f+vw 0 0 0;
        color: #000;
        text-align: center;
        font-size: 48/$f+vw;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.96px;
        text-transform: capitalize;
      }
    }
    .content{
      margin: 80/$f+vw 0 60/$f+vw 0;
      .matter{
        display: flex;
        justify-content: space-between;
        &:nth-child(2n) {
          flex-direction: row-reverse;
        }
        &:not(:last-child) {
          margin: 0 0 40/$f+vw;
        }
        .l{
          width: 954/$f+vw;
          height: 472/$f+vw;
          position: relative;
          border-radius: 20/$f+vw;
          overflow: hidden;
          z-index: 1;
          &:hover{
            img{
              transform: scale(1.05);
            }
          }
          &:after{
            content: '';
            position: absolute;
            width: 100%;
            height: 207/$f+vw;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #F2F2F2 100%);
            backdrop-filter: blur(2px);
            bottom: 0;
            left: 0;
            z-index: 1;
          }
          .img{
            width: 100%;
            height: 100%;
            transition: .6s;
          }
          .text{
            position: absolute;
            bottom: 40/$f+vw;
            width: 100%;
            left: 0;
            padding: 0 65/$f+vw 0 45/$f+vw;
            z-index: 2;
            h1{
              color: #000;
              font-size: 36/$f+vw;
              font-style: normal;
              font-weight: 600;
              line-height: normal;
              letter-spacing: 0.72px;
              text-transform: capitalize;
            }
            p{
              margin: 10/$f+vw 0 0 0;
              color: #000;
              font-size: 18/$f+vw;
              font-style: normal;
              font-weight: 400;
              line-height: 30/$f+vw; /* 166.667% */
            }
          }
        }
        .r{
          width: 445/$f+vw;
          height: 472/$f+vw;
          border-radius: 20/$f+vw;
          overflow: hidden;
          position: relative;
          &:hover{
            img{
              transform: scale(1.05);
            }
          }
          &:after{
            content: '';
            position: absolute;
            width: 100%;
            height: 207/$f+vw;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #F2F2F2 100%);
            backdrop-filter: blur(2px);
            bottom: 0;
            left: 0;
            z-index: 1;
          }
          .img{
            width: 100%;
            height: 100%;
            transition: .6s;
          }
          .text{
            position: absolute;
            width: 100%;
            padding: 0 47/$f+vw 0 40/$f+vw;
            bottom: 40/$f+vw;
            left: 0;
            z-index: 2;
            h1{
              color: #000;
              font-size: 36/$f+vw;
              font-style: normal;
              font-weight: 600;
              line-height: normal;
              letter-spacing: 0.72px;
              text-transform: capitalize;
            }
            p{
              margin: 10/$f+vw 0 0 0;
              color: #000;
              font-size: 18/$f+vw;
              font-style: normal;
              font-weight: 400;
              line-height: 30/$f+vw; /* 166.667% */
              -webkit-line-clamp: 3;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
          }
        }
      }
    }
    .more{
      display: flex;
      width: fit-content;
      padding: 8/$f+vw 30/$f+vw;
      justify-content: center;
      align-items: center;
      gap: 20/$f+vw;
      border-radius: 91/$f+vw;
      border: 1px solid #000;
      background: #000;
      transition: all 600ms;
      color: #FFF;
      font-size: 20/$f+vw;
      margin: auto;

      p {
        line-height: 2;
        letter-spacing: 1px;
        text-transform: uppercase;
      }

      svg {
        width: 16/$f+vw;
        display: block;
      }

      &:hover {
        background: #5E9EFF;
        border-color: #5E9EFF;
      }
    }
  }

  .section3{
    padding: 0 240/$f+vw 100/$f+vw 240/$f+vw;
    .title{
      text-align: center;
      p{
        color: #000;
        font-size: 20/$f+vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 1px;
        text-transform: uppercase;
      }
      h1{
        margin: 10/$f+vw 0 0 0;
        color: #000;
        text-align: center;
        font-size: 48/$f+vw;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.96px;
        text-transform: capitalize;
      }
    }
    .content{
      padding: 0 84/$f+vw 80/$f+vw 100/$f+vw;
      display: flex;
      margin: 80/$f+vw 0 0 0;
      position: relative;
      z-index: 1;
      .button{
        position: absolute;
        width: 1524/$f+vw;
        z-index: 5;
        left: 50%;
        transform: translateX(-50%);
        top: 48%;
        display: flex;
        justify-content: space-between;
        pointer-events: none;
        img{
          width: 84/$f+vw;
          height: 84/$f+vw;
          cursor: pointer;
          pointer-events: auto;
          transition: .6s ease;
          &:first-child{
            transform: rotate(180deg);
          }
        }
      }
      &:after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 654/$f+vw;
        border-radius: 20/$f+vw;
        background: #F5F5F5;
        z-index: -1;
      }
      .img{
        width: 519/$f+vw;
        height: 654/$f+vw;
        border-radius: 20/$f+vw;
        border: 14/$f+vw solid #FFF;
        .imgSwiper{
          width: 100%;
          height: 100%;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
      @keyframes yAnimate {
        0%{
          transform: translateY(20px);
          opacity: 0;
        }
        100%{
          transform: translateY(0);
          opacity: 1;
        }
      }
      .r{
        width: 677/$f+vw;
        margin: 180/$f+vw 0 0 60/$f+vw;
        height: fit-content;
        position: relative;
        .swiper-pagination{
          position: absolute;
          right: 0;
          bottom: 24/$f+vw;
          display: flex;
          gap: 0 15/$f+vw;
          span{
            width: 10/$f+vw;
            height: 10/$f+vw;
            opacity: .3;
            transition: .6s ease;
            background: #000;
            &.swiper-pagination-bullet-active{
              opacity: 1;
            }
          }
        }
        .r_list{
          display: none;
          &.on{
            display: block;
            animation: yAnimate .6s ease forwards;
          }
          .headline{
            display: flex;
            align-items: center;
            position: relative;
            width: fit-content;
            h1{
              color: #000;
              font-size: 40/$f+vw;
              font-style: normal;
              font-weight: 600;
              line-height: 30/$f+vw; /* 75% */
            }
            .num{
              color: rgba(120, 120, 120, 0.10);
              font-size: 128/$f+vw;
              font-style: italic;
              font-weight: 900;
              line-height: normal;
              text-transform: uppercase;
              position: absolute;
              bottom: -70/$f+vw;
              left: 75%;
            }
          }
          .text {
            margin: 40/$f+vw 0 30/$f+vw 0;
            color: #000;
            font-size: 20/$f+vw;
            font-style: normal;
            font-weight: 400;
            line-height: 30/$f+vw; /* 150% */
          }
          .more{
            display: flex;
            width: fit-content;
            padding: 8/$f+vw 30/$f+vw;
            justify-content: center;
            align-items: center;
            gap: 20/$f+vw;
            border-radius: 91/$f+vw;
            border: 1px solid #000;
            background: #000;
            transition: all 600ms;
            color: #FFF;
            font-size: 20/$f+vw;

            p {
              line-height: 2;
              letter-spacing: 1px;
              text-transform: uppercase;
            }

            svg {
              width: 16/$f+vw;
              display: block;
            }

            &:hover {
              background: #5E9EFF;
              border-color: #5E9EFF;
            }
          }
        }
      }
    }
  }

  .section4{
    overflow: hidden;

    position: relative;
    z-index: 1;
    padding: 100/$f+vw 0 152/$f+vw 0;
    background: linear-gradient(107deg, #D7ECF9 12.85%, #C0EBD7 84.88%);
    .title{
      text-align: center;
      h1{
        color: #000;
        font-size: 40/$f+vw;
        font-style: normal;
        font-weight: 600;
        line-height: 72/$f+vw; /* 180% */
        letter-spacing: 0.8px;
        text-transform: capitalize;
        margin: 0 0 36/$f+vw;
      }
      .dis{
        display: flex;
        align-items: center;
        justify-content: center;
        span{
          width: 659/$f+vw;
          height: 1px;
          background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
          &:last-child{
            transform: rotate(180deg);
          }
        }
        img{
          width: 100/$f+vw;
          margin: 0 21/$f+vw;
        }
      }
    }
    @keyframes goAnimate {
      100%{
        transform: translateX(-50%);
      }
    }
    @keyframes go2Animate {
      0% {
        transform: translateX(-50%);
      }

      100% {
        transform: translateX(0%);
      }
    }
    .content{
      margin: 69/$f+vw 0 0 0;
      .matter{
        display: flex;
        width: max-content;
        animation: goAnimate 30s linear infinite;
        &:not(:last-child) {
          margin: 0 0 90/$f+vw;
        }
        &:nth-child(2) {
          animation: go2Animate 30s linear infinite;
        }
        .flex{
          display: flex;
          .item{
            width: 252/$f+vw;
            height: 108/$f+vw;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 80/$f+vw 0 0;
            border-radius: 6.75px;
            background: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(2px);
            &:hover{
              img{
                transform: scale(1.1);
              }
            }
            img{
              object-fit: contain;
              transition: 1s;
            }
          }
        }
      }
    }
  }
  .section5{
    position: relative;
    z-index: 1;
    height: 814/$f+vw;
    display: flex;
    gap: 0 2/$f+vw;
    .item{
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      &:hover{
        &:before{
          opacity: 1;
        }
        &:after{
          opacity: 0;
        }
        .y{
          transform: translateY(0);
          .icon{
            svg{
              path{
                fill: #3279FF;
              }
            }
          }
          p{
            color: #3279FF;
          }
        }
      }
      .y{
        position: relative;
        z-index: 2;
        transform: translateY(97/$f+vw);
        transition: .6s;

        .icon{
          width: 80/$f+vw;
          height: 80/$f+vw;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 40/$f+vw;
          svg{
            max-width: 100%;
            max-height: 100%;
            path{
              fill: #fff;
              transition: .6s ease;
            }
          }
        }
        p{
          color: #FFF;
          text-align: center;
          transition: .6s ease;
          font-size: 24/$f+vw;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          text-transform: capitalize;
        }
      }
      &:after{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 100%);
        transition: all 0.36s;
      }
      &:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(6px);
        display: block;
        opacity: 0;
        transition: all 0.36s;
        z-index: 1;
      }
    }
  }

  .section6{
    padding: 100/$f+vw 240/$f+vw;
    .top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title{
        p{
          color: #000;
          font-size: 20/$f+vw;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          letter-spacing: 1px;
          text-transform: uppercase;
        }
        h1{
          margin: 10/$f+vw 0 0 0;
          color: #000;
          text-align: center;
          font-size: 48/$f+vw;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          letter-spacing: 0.96px;
          text-transform: capitalize;
        }
      }
      .more{
        display: flex;
        width: fit-content;
        padding: 8/$f+vw 30/$f+vw;
        justify-content: center;
        align-items: center;
        gap: 20/$f+vw;
        border-radius: 91/$f+vw;
        border: 1px solid #000;
        background: #000;
        transition: all 600ms;
        color: #FFF;
        font-size: 20/$f+vw;

        p {
          line-height: 2;
          letter-spacing: 1px;
          text-transform: uppercase;
        }

        svg {
          width: 16/$f+vw;
          display: block;
        }

        &:hover {
          background: #5E9EFF;
          border-color: #5E9EFF;
        }
      }
    }
    .content{
      margin: 80/$f+vw 0 0 0;
      .swiper-pagination{
        position: static;
        width: fit-content;
        margin: 60/$f+vw auto 0;
        display: flex;
        gap: 0 15/$f+vw;
        span{
          width: 10/$f+vw;
          height: 10/$f+vw;
          opacity: .3;
          transition: .6s ease;
          background: #000;
          &.swiper-pagination-bullet-active{
            opacity: 1;
          }
        }
      }
      .newsSwiper{
        width: 100%;
        .item{
          width: 100%;
          border-radius: 0px 20/$f+vw;
          background: #F5F5F5;
          padding: 30/$f+vw 20/$f+vw 40/$f+vw 20/$f+vw;
          position: relative;
          display: block;
          z-index: 1;
          &:hover{
            &:after{
              opacity: 1;
            }
            .img{
              img{
                transform: scale(1.05);
              }
            }
          }
          &:after{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: linear-gradient(120deg, #85AFFF 12.34%, #BDD4FF 95.15%);
            z-index: -1;
            border-radius: 0px 20/$f+vw;
            opacity: 0;
            transition: .6s ease;
          }
          .img{
            width: 100%;
            height: 292/$f+vw;
            overflow: hidden;
            border-radius: 20/$f+vw;
            margin: 0 0 40/$f+vw;
            img{
              width: 100%;
              height: 100%;
              transition: .6s;
            }
          }
          .text{
            .time{
              color: #8C8C8C;
              font-size: 16/$f+vw;
              font-style: normal;
              font-weight: 400;
              line-height: 20/$f+vw; /* 125% */
              margin: 0 0 20/$f+vw;
            }
            p{
              color: #000;
              font-size: 24/$f+vw;
              font-style: normal;
              font-weight: 400;
              line-height: 36/$f+vw; /* 150% */
              -webkit-line-clamp: 4;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }

          }
        }
      }
    }
  }



  .foot{
    margin-top: -84/$f+vw;
  }
  @media screen and (max-width: 1024px) {
    .banner{
      height: 400px;
      .button{
        transform: none;
        top: unset;
        bottom: 15%;
        width: fit-content;
        gap: 0 15px;
        .circle{
          width: 40px;
          height: 40px;
        }
      }
      .swiper-container{
        .swiper-slide{
          .text{
            left: 5%;
            bottom: 150px;
            p{
              font-size: 13px;
            }
            h1{
              font-size: 18px;
              line-height: 1.5;
            }
          }
        }
      }
    }

    .section1{
      padding: 40px 0;
      .title{
        .p1{
          font-size: 14px;
          line-height: unset;
        }
        h1{
          font-size: 26px;
          margin: 5px 0 22px;
        }
        a {
          padding: 4px 15px;
          gap: 10px;
          font-size: 18px;
          border-radius: 80px;
          svg {
            width: 16px;
          }
        }
      }
      .content{
        margin: 30px 0 0 0;
        .index2Swiper{
          width: 150vw;
          padding: 20px 0;
          .swiper-slide{
            .item{
              height: auto;
              .joke{
                transform: none!important;
                padding: 12px;
                .img{
                  width: 100%;
                  height: 150px;
                  margin: 0;
                }
                h1{
                  margin: 12px 0 0 0 ;
                  font-size: 16px;
                  line-height: 1.5;
                }
              }
            }
          }
        }
      }
    }

    .section2{
      padding: 30px 5%;
      .title{
        p{
          font-size: 14px;
          line-height: unset;
        }
        h1{
          font-size: 26px;
          margin: 5px 0 22px;
        }
      }
      .content{
        margin: 25px 0 0 0;
        .matter{
          flex-direction: column!important;
          &:not(:last-child) {
            margin: 0 0 15px;
          }
          .l{
            width: 100%;
            height: 260px;
            padding: 45px 0 25px 0;
            border-radius:10px;
            margin: 0 0 15px;
            &:after{
              height: 90%;
            }
            .img{
              position: absolute;
              top: 0;
              left: 0;
            }
            .text{
              padding: 0 5%;
              bottom: 0;
              position: relative;
              z-index: 2;
              h1{
                font-size: 18px;
                margin: 0 0 12px;
              }
              p{
                font-size: 13px;
                line-height: 1.7;
              }
            }
          }
          .r{
            width: 100%;
            height: 260px;
            padding: 45px 0 25px 0;
            &:after{
              height: 90%;
            }
            border-radius:10px;
            .img{
              position: absolute;
              top: 0;
              left: 0;
            }
            .text{
              padding: 0 5%;
              bottom: 0;
              position: relative;
              z-index: 2;
              h1{
                font-size: 18px;
                margin: 0 0 12px;
              }
              p{
                font-size: 13px;
                line-height: 1.7;
              }
            }
          }
        }
      }
      .more{
        padding: 4px 15px;
        gap: 10px;
        font-size: 18px;
        border-radius: 80px;
        margin: 25px auto 0;
        svg {
          width: 16px;
        }
      }
    }

    .section3{
      padding: 50px 5% 75px 5%;
      .title{
        p{
          font-size: 14px;
          line-height: unset;
        }
        h1{
          font-size: 26px;
          margin: 5px 0 22px;
        }
      }
      .content{
        flex-direction: column;
        padding: 0;
        .button{
          width: fit-content;
          left: 0;
          position: static;
          transform: none;
          gap: 0 20px ;
          margin: 30px 0 0 0;
          img{
            width: 40px;
            height: 40px;
          }
        }
        &:after{
          display: none;
        }
        .img{
          width: 100%;
          height: auto;
        }
        .r{
          width: 100%;
          margin: 15px 0 0 0;
          padding: 30px 0 0 0;
          .swiper-pagination{
            top: 0;
            gap: 0 10px;
            right: unset;
            left: 50%;
            transform: translateX(-50%);
            span{
              width: 7px;
              height: 7px;
            }
          }
          .r_list{
            .headline{
              h1{
                font-size: 24px;
                line-height: unset;
              }
              .num{
                font-size: 40px;
                bottom: -13px;
                left: 90%;
              }
            }
            .text{
              font-size: 13px;
              line-height: 2;
            }
            .more{
              padding: 4px 15px;
              gap: 10px;
              font-size: 18px;
              border-radius: 80px;
              margin: 25px 0 0 0;
              svg {
                width: 16px;
              }
            }
          }
        }
      }

    }

    .section4{
      padding: 55px 5%;
      .title{
        h1{
          font-size: 24px;
          line-height: unset;
          margin: 0 0 15px;
        }
        .dis{
          img{
            width: 54px;
            margin: 0 10px;
          }
        }
      }
      .content{
        margin: 30px 0 0 0;
        .matter{
          .flex{
            .item{
              width: 120px;
              height: 70px;
              margin: 0 15px 0 0;
              img{
                width: 50px;
                max-height: 50px;
              }
            }
          }
        }
      }
    }

    .section5{
      flex-direction: column;
      height: auto;
      .item{
        width: 100%;
        height: auto;
        padding: 25px 0;
        .y{
          transform: none!important;
          .icon{
            width: 40px;
            height: 40px;
            margin: 0 auto 10px;
          }
          p{
            font-size: 14px;
          }
        }
      }
    }

    .section6{
      padding: 45px 5%;
      .top{
        flex-direction: column;
        align-items: unset;
        .title{
          p{
            font-size: 14px;
            line-height: unset;
          }
          h1{
            font-size: 26px;
            margin: 5px 0 5px;
            text-align: left;
          }
        }
        .more{
          padding: 4px 15px;
          gap: 10px;
          font-size: 18px;
          border-radius: 80px;
          margin: 25px 0 0 0;
          svg {
            width: 16px;
          }
        }
      }
      .content{
        margin: 30px 0 0 0;
        .newsSwiper{
          .swiper-slide{
            .item{
              padding: 10px;
              border-radius: 10px;
              &:after{
                border-radius: 10px;
              }
              .img{
                height: auto;
                margin: 0 auto 20px;
                border-radius: 10px;
              }
              .text{
                .time{
                  font-size: 13px;
                  line-height: unset;
                  margin: 0 0 5px;
                }
                p{
                  font-size: 13px;
                  line-height: 1.8;
                }
              }
            }
          }
        }
        .swiper-pagination{
          gap: 0 10px;
          margin: 25px auto 0;
          span{
            width: 7px;
            height: 7px;
          }
        }
      }
    }

    .how_content{
      width: 90%;
      height: auto;
      padding: 70px 5%;
      margin: 0 auto 30px;
      .joke{
        flex-direction: column;
        align-items: unset;
        .l{
          margin: 0 0 20px;
          h1{
            font-size: 24px;
            line-height: 1.3;
          }
        }
        .r{
          width: 100%;
          .text{
            font-size: 13px;
            line-height: 1.7;
            margin: 0 0 30px;
            word-break: break-all;
          }
          a {
            padding: 4px 15px;
            gap: 10px;
            font-size: 18px;
            border-radius: 80px;
            svg {
              width: 16px;
            }
          }
        }
      }
    }

    .foot{
      margin-top: 0;
    }
  }
}